<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/favicon.png}"/>
    <link rel="bookmark" th:href="@{/favicon.png}"/>
    <title th:text="#{index.signup}">注册</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script type="text/javascript" src="moment/moment.min.js"></script>
    <script type="text/javascript" src="moment/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="js/tempusdominus-bootstrap-4.min.js"></script>
    <link rel="stylesheet" href="css/tempusdominus-bootstrap-4.min.css"/>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        / / background-size: cover;
        / / background-image: url("image/101-desktop-wallpaper.png");
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .form-text {
            color: red;
        }
    </style>
</head>
<body class="text-center">

<form class="form-signin" id="signin-form">
    <img class="mb-4" src="favicon.png" alt="" width="50%" height="50%">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{index.signup.welocme}">Please sign up</h1>

    <div class="row mb-2">
        <div class="col">
            <a href="/" id="a-back"><button onclick="addLocaleUrl('a-back')" type="button" class="btn btn-secondary btn-sm">[[#{index.back}]]</button></a>
        </div>
        <div class="col">
            <a href="/sign-in" id="a-sign-in"><button onclick="addLocaleUrl('a-sign-in')" type="button" class="btn btn-success btn-sm">[[#{index.signIn}]]</button></a>
        </div>
    </div>

    <!-- z账号 -->
    <div class="form-group">
        <input type="text" onblur="checkUserIdUseService($('#userId').val())" onclick="closeError()" name="userId" class="form-control" id="userId" th:placeholder="#{index.userId}">
        <!-- 错误提示信息 -->
        <small id="userIdHelp" class="form-text">20个字符以内,可以是字母或数字(注册后不可更改！)</small>
    </div>

    <!-- 昵称 -->
    <div class="form-group">
        <input type="text" name="userName" onclick="closeError()" class="form-control" id="userName" th:placeholder="#{index.userName}">
        <!-- 错误提示信息 -->
        <small id="userNameHelp" class="form-text">20个字符以内，可以是汉字</small>
    </div>

    <!-- 邮箱 -->
    <div class="form-group">
        <input type="text" name="email" onblur="checkEmailUseService($('#InputEmail').val())" onclick="closeError()" class="form-control" id="InputEmail" th:placeholder="#{index.Enteremail}">
        <!-- 错误提示信息 -->
        <small id="emailHelp" class="form-text"></small>
    </div>

    <!-- 密码 -->
    <div class="form-group">
        <input type="password" onclick="closeError()" name="password" class="form-control" id="InputPassword"
               th:placeholder="#{index.Password}">
        <small id="passwordMessage" class="form-text">6~30个字符，可以是字母数字或其它特殊字符</small>
    </div>

    <!-- 密码 -->
    <div class="form-group">
        <input type="password" name="password2" onclick="closeError()" class="form-control" id="InputPassword2"
               th:placeholder="#{index.Password2}">
        <!-- 错误提示信息 -->
        <small id="passwordHelp" class="form-text"></small>
    </div>

    <!-- 性别 -->
    <div class="custom-control custom-radio custom-control-inline">
        <input class="custom-control-input" type="radio" name="sex" id="boy" value="男">
        <label class="custom-control-label" for="boy">[[#{index.boy}]]</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input class="custom-control-input" type="radio" name="sex" id="girl" value="女">
        <label class="custom-control-label" for="girl">[[#{index.girl}]]</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input class="custom-control-input" type="radio" name="sex" id="don'tNo" value="保密">
        <label class="custom-control-label" for="don'tNo">[[#{index.dontnosex}]]</label>
    </div>

    <!-- 生日 -->
    <div class="form-group">
        <div class="input-group date" id="datetimepicker4" data-target-input="nearest">
            <input onclick="closeError()" name="birthday" id="birthday" type="text" th:placeholder="#{index.birthday}" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
            <div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
                <div class="input-group-text"><img src="image/calendar.svg" width="30px" height="30px" alt="点我选择日期"/></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker4').datetimepicker({
                format: "YYYY-MM-DD",
            });
        });
    </script>


    <!-- 学校 -->
    <div class="form-group">
        <input type="text" onclick="closeError()" name="school" class="form-control" id="userSchool" aria-describedby="userSchoolHelp"
               th:placeholder="#{index.school}">
        <!-- 错误提示信息 -->
        <small id="userSchoolHelp" class="form-text"></small>
    </div>

    <!-- 专业 -->
    <div class="form-group">
        <input type="text" onclick="closeError()" name="major" class="form-control" id="userMajor" aria-describedby="userMajorHelp"
               th:placeholder="#{index.major}">
        <!-- 错误提示信息 -->
        <small id="userMajorHelp" class="form-text"></small>
    </div>

    <!--验证码 -->
    <div class="form-group">
        <a href="javascript:void(0);">
            <img title="点击刷新" id="image-captcha" src="/captche/images" onclick="this.src='/captche/images?'+Math.random()"/>
        </a>
        <input onclick="closeError()" autocomplete="off" type="text" th:placeholder="#{publish.issue.CAPTCHA}" name="validateCode" id="validateCode" class="form-control" required="required"/>
        <small id="validateCodeMessage" class="form-text text-muted" th:text="${kaptchaMsg}"></small>

    </div>
    <div style="display:none;" id="error-message" class="alert alert-danger" role="alert">

    </div>

    <button class="btn btn-lg btn-primary btn-block" type="button" th:text="#{index.signup}" onclick="signUp()">注册</button>


    <p class="mt-5 mb-3 text-muted">&copy; 2019-2019</p>
</form>

<script src="/js/url.js" type="text/javascript"></script>
<script src="/js/checkInput.js" type="text/javascript"></script>
<script>
    var signUp = function () {
        var userId = $("#userId").val();
        var userName = $("#userName").val();
        var sex = getRadioButtonCheckedValue('sex');
        var InputEmail = $("#InputEmail").val();
        var InputPassword = $("#InputPassword").val();
        var InputPassword2 = $("#InputPassword").val();
        var birthday = $("#birthday").val();
        var userSchool = $("#userSchool").val();
        var userMajor = $("#userMajor").val();
        var validateCode = $("#validateCode").val();

        if(userId == "") {
            document.getElementById("userIdHelp").innerText = "用户ID不能为空";
            return;
        }
        if(userName == "") {
            document.getElementById("userNameHelp").innerText = "昵称不能为空";
            return;
        }

        if(InputEmail == "") {
            document.getElementById("emailHelp").innerText = "邮箱不能为空";
            return;
        }

        if(InputPassword == "" || InputPassword2 == "") {
            document.getElementById("passwordHelp").innerText = "密码不能为空";
            return;
        }
        if(InputPassword != InputPassword2) {
            document.getElementById("passwordHelp").innerText = "两次密码不相同";
            return;
        }
        if(validateCode == "") {
            document.getElementById("validateCodeMessage").innerText = "验证码不能为空";
            return;
        }
        if(checkEmailUseService(InputEmail) == false) {
            document.getElementById("error-message").innerText = "该邮箱已被注册，请更换邮箱或尝试登陆！";
            $("#error-message").show();
            return;
        }
        if(checkUserIdUseService(userId) == false) {
            document.getElementById("error-message").innerText = "该账号已被注册，请更换账号！";
            $("#error-message").show();
            return
        }

        $.ajax({
            type: 'POST',
            url: '/api/register',
            data: {
                "userId":userId,
                "userName": userName,
                "email": InputEmail,
                "password": InputPassword,
                "sex": sex,
                "birthday": birthday,
                "school": userSchool,
                "major": userMajor,
                "validateCode": validateCode
            },
            success: function (resultdata) {
                console.log(resultdata);
                if(resultdata.success == false) {
                    document.getElementById("image-captcha").src = '/captche/images?'+Math.random();
                    document.getElementById("error-message").innerText = resultdata.msg;
                    $("#error-message").show();
                }  else {
                    alert("注册成功，即将为你跳转到首页！");
                    window.location.replace("/");
                }
            }
        });
        //checkUserIdUseService(userId);
    };


    function closeError() {
        $("#error-message").hide();
    }

    var checkEmailUseService = function (email) {
        $.ajax({
            type: 'get',
            url: '/api/checkEmail',
            data: {
                "email": email
            },
            success: function (resultdata) {
                if(resultdata.success == false) {
                    document.getElementById("emailHelp").innerText = "该账号已被注册，请尝试登陆！";
                    return false;
                }  else {
                    document.getElementById("emailHelp").innerText = "该账账号可用！";
                    return true;
                }
            }
        });
    };

    var checkUserIdUseService = function (userId) {
        $.ajax({
            type: 'get',
            url: '/api/checkUserId',
            data: {
                "userId": userId
            },
            success: function (resultdata) {
                console.log(resultdata);
                if(resultdata.success == false) {
                    document.getElementById("userIdHelp").innerText = resultdata.msg;
                    return false;
                }  else {
                    document.getElementById("userIdHelp").innerText = resultdata.msg;
                    return true;
                }
            }
        });
    };

    function getRadioButtonCheckedValue(tagNameAttr){
        var radio_tag = document.getElementsByName(tagNameAttr);
        for(var i=0;i<radio_tag.length;i++){
            if(radio_tag[i].checked){
                var checkvalue = radio_tag[i].value;
                return checkvalue;
            }
        }
    }
</script>
</body>
</html>
